<template>
  <div class="information">
    <!-- 个人信息 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="信息管理" name="first">
        <h5 v-if="!isexist">
          暂无数据，
          <el-button type="text" @click="unfold">填写信息</el-button>
        </h5>
        <table v-else class="infotable">
          <!-- <tr class="infotr">
            <th colspan="2" align="left">个人信息</th>
          </tr>-->
          <!-- 个人信息 -->
          <tr class="infotr">
            <td align="left" class="infotrtd">姓名 ：</td>
            <td align="left" class="infotrtd2">{{form.userName}}</td>
          </tr>
          <tr class="infotr">
            <td align="left" class="infotrtd">性别 ：</td>
            <td align="left" class="infotrtd2">{{form.sex}}</td>
          </tr>
          <tr class="infotr">
            <td align="left" class="infotrtd">生日 ：</td>
            <td align="left" class="infotrtd2">{{change(form.birthday)}}</td>
          </tr>
          <tr class="infotr">
            <td align="left" class="infotrtd">邮箱 ：</td>
            <td align="left" class="infotrtd2">{{form.Email}}</td>
          </tr>
          <tr class="infotr">
            <td align="left" class="infotrtd">手机号码 ：</td>
            <td align="left" class="infotrtd2">{{form.phone}}</td>
          </tr>
          <tr class="infotr">
            <td align="left" class="infotrtd">地址 ：</td>
            <td align="left" class="infotrtd2">{{form.address}}</td>
          </tr>
          <tr>
            <td colspan="2" align="center">
              <el-button type="text" @click="unfold">修改</el-button>
            </td>
          </tr>
        </table>
      </el-tab-pane>
           <!-- 头像上传 -->
      <el-tab-pane label="头像管理" name="second">
        <el-upload
          class="avatar-dome"
          ref="upload"
          list-type="picture-card"
          action="http://localhost:3000/users/headPic"
          :limit="1"
          :show-file-list="true"
          :auto-upload="false"
          :multiple="true"
          :before-upload="beforeupload"
        >
          <!-- <i class="el-icon-plus"></i> -->
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
         <el-button type="primary" @click="uploadPic">确 定</el-button>
      </el-tab-pane>
   
    </el-tabs>  
     <!-- <el-form >
          <el-form-item>
           
          </el-form-item>
        </el-form> -->
    <el-dialog title="填写信息" :visible.sync="dialogFormVisible" class="aabbb">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.userName" autocomplete="off" style="width: 350px;float:left"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择性别" style="float:left;width:350px">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
            <el-option label="机密" value="机密"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生日" :label-width="formLabelWidth" required>
          <el-col :span="11">
            <el-form-item prop="birthday">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.birthday"
                style="width: 350px;float:left"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="Email">
          <el-input type="email" v-model="form.Email" style="width: 350px;float:left"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth" prop="phone">
          <el-input type="input" maxlength="11" v-model="form.phone" style="width: 350px;float:left"></el-input>
        </el-form-item>

        <el-form-item label="地址" :label-width="formLabelWidth" style="float:left;" prop="address">
          <el-cascader v-model="site" :options="options" style="width: 350px;float: left;" @change="cityChange"></el-cascader>
          <el-input type="input" v-model="form.address" style="width: 350px;float:left"></el-input>
        </el-form-item>
        <br/>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import jwt_decode from 'jwt-decode'
import { province } from "../assets/sheng";
export default {
  data() {
    return {
      fileList: [],
      param: "", // 表单最后提交的参数对象
      imageUrl: "",
      activeName: "first",
      form: {
        userName: "",
        sex: "",
        Email: "",
        phone: "",
        address: "",
        birthday: "",
        address: ""
      },
      site:"",
      isexist:false,
      rules: {
        userName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        Email:[{
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: "blur"
          }],
        phone: [{ required: true, message: "手机号码不能为空" }]
      },
      formLabelWidth: "120px",
      dialogFormVisible: false,
      options: []
    };
  },
  computed:{
      user: {
      get() {
        return this.$store.state.user;
      },
      set(v) {
        this.$store.state.user = v;
      }
    }
  },
  created() {
    this.form=this.user[0]
    this.isexist=true
    // var phone=(jwt_decode(localStorage.getItem('mytoken')).phone)||(jwt_decode(sessionStorage.getItem('mytoken')).phone)
    // console.log('phone'+phone)
    // this.$axios
    //   .get("http://localhost:3000/users/" +phone)
    //   .then(res => {
    //     console.log('个人信息'+res.data.data)
    //     this.form=res.data.data[0]
    //     this.isexist=true
 
    //   })
    //   .catch(err => {
    //     console.log(err);
    //   });
  },
  
  methods: {
     change(date){
        return this.$moment(new Date(date)).format('YYYY-MM-DD')
      },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    cityChange() {
       this.form.address=this.site;
    },
    submitForm(formName) {
      
      this.$refs[formName].validate(valid => {
        alert(valid)
        if (valid) {
          this.$axios
            .put(
              "http://localhost:3000/users/updateUserInfos/"+this.user[0].userId ,this.form
            )
            .then(res => {
              this.$message('信息更改成功！')
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
        //  this.dialogFormVisible = false;
      });this.dialogFormVisible = false
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(this.imageUrl)
      // this.$axios.put()
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  uploadPic() {
      // this.$refs.upload.submit();
      let _this = this;
      var names = _this.form.name;
      this.$refs.upload.submit();
      //将非表单元素的数据也添加到参数对象中；
      this.param.append("userId", this.user[0].userId);
       //将表单元素的数据也添加到参数对象中；
      this.param.append("caption", names);
      //设置提交请求头，适用于上传文件
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      //调用接口，执行上传所有数据的操作
      this.$axios
        .post("http://localhost:3000/users/headPic", this.param, config)
        .then(function(result) {
          console.log(result);
          alert("上传成功");
        });
    },
     beforeupload(file) {
      console.log("准备上传。。。。");
      // 准备表单上传需要的参数对象
      this.param = new FormData();
      this.fileList.push(file); // 把需要上传的文件保存到数组中
      console.log("这是图片文件" + JSON.stringify(this.fileList));
      // 遍历数组，把所有文件都保存到参数对象中
      for (let i = 0; i < this.fileList.length; i++) {
        this.param.append(`img_${i}`, this.fileList[i]);
      }
      return false;
    },
    //导入省市级联js数据
    unfold() {
      this.dialogFormVisible = true;
      this.options = province;
    }
  }
};
</script>
<style scoped>
/* 信息 */
.infotable {
  width: 300px;
  margin-left: 100px;
}
.infotrtd {
  width: 100px;
  color: #999;
}
.infotrtd2 {
  font-size: 14px;
  color: #222;
}
.infotr {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
}
.information >>>.el-upload input{
  display: none;
}
/* 头像 */

</style>